<script lang="ts" name="goodsModelDetail" setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { useGoodsModelApi } from '/@/api/Goods/Details/goodsModel';
import { useGoodsTypeModelApi } from '/@/api/Goods/goodsTypeModel';
import { useSyssupplierApi } from '/@/api/interacting/syssupplier';
import { useSyscustomerApi } from '/@/api/interacting/syscustomer';
import { useWarehouseModelApi } from '/@/api/interacting/warehouse/warehouseModel';
import { useWarePlaceModelApi } from '/@/api/interacting/warehouse/warePlaceModel';
import { getDictDataList } from '/@/api/system/admin';
import { getDepartmentList, getUserList } from '/@/api/customer/userList';
import { useSysLogOpApi, type SysLogOp, type PageSysLogOpInput } from '/@/api/system/sysLogOp';
import { useSysstocktakingorderApi, type Sysstocktakingorder } from '/@/api/OutWarehou/sysstocktakingorder';
import { useSyspurchaseorderApi, type Syspurchaseorder } from '/@/api/order/syspurchaseorder';
import { useSyssalesorderApi, type Syssalesorder } from '/@/api/order/syssalesorder';
import { useInventoryQueryApi, type StockDistribution } from '/@/api/inventory/inventoryQuery';
import { useSystransferorderApi, type Systransferorder } from '/@/api/OutWarehou/systransferorder';
import { useSysinstockorderApi, type Sysinstockorder } from '/@/api/OutWarehou/sysinstockorder';
import { useSysoutstockorderApi, type Sysoutstockorder } from '/@/api/OutWarehou/sysoutstockorder';

const router = useRouter();
const goodsModelApi = useGoodsModelApi();
const goodsTypeModelApi = useGoodsTypeModelApi();
const syssupplierApi = useSyssupplierApi();
const syscustomerApi = useSyscustomerApi();
const warehouseModelApi = useWarehouseModelApi();
const warePlaceModelApi = useWarePlaceModelApi();
const sysLogOpApi = useSysLogOpApi();
const sysstocktakingorderApi = useSysstocktakingorderApi();
const syspurchaseorderApi = useSyspurchaseorderApi();
const syssalesorderApi = useSyssalesorderApi();
const inventoryQueryApi = useInventoryQueryApi();
const systransferorderApi = useSystransferorderApi();
const sysinstockorderApi = useSysinstockorderApi();
const sysoutstockorderApi = useSysoutstockorderApi();

const state = reactive({
	showDialog: false,
	loading: false,
	goodsData: {} as any,
	warehouseData: {} as any, // 仓库详细信息
	goodsTypeList: [] as any[],
	supplierList: [] as any[],
	customerList: [] as any[],
	goodsUnitList: [] as any[],
	warehouseList: [] as any[],
	warePlaceList: [] as any[], // 库位列表
	warehouseWarePlaces: [] as any[], // 当前仓库的库位列表
	departmentList: [] as any[], // 部门列表
	userList: [] as any[], // 用户列表
	activeTab: 'basic', // 当前激活的标签页
	// 操作记录相关状态
	operationLogQueryParams: {} as any,
	operationLogTableParams: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
	operationLogTableData: [] as SysLogOp[], // 操作记录数据
	operationLogTableLoading: false,
	// 盘点记录相关状态
	stocktakingQueryParams: {} as any,
	stocktakingTableParams: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
	stocktakingTableData: [] as Sysstocktakingorder[], // 盘点记录数据
	stocktakingTableLoading: false,
	// 调拨记录相关状态
	transferQueryParams: {} as any,
	transferTableParams: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
	transferTableData: [] as Systransferorder[], // 调拨记录数据
	transferTableLoading: false,
	// 进货记录相关状态
	purchaseQueryParams: {} as any,
	purchaseTableParams: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
	purchaseTableData: [] as Syspurchaseorder[], // 进货记录数据
	purchaseTableLoading: false,
	// 销售记录相关状态
	salesQueryParams: {} as any,
	salesTableParams: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
	salesTableData: [] as Syssalesorder[], // 销售记录数据
	salesTableLoading: false,
	// 库存分布相关状态
	distributionQueryParams: {} as any,
	distributionTableParams: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
	distributionTableData: [] as StockDistribution[], // 库存分布数据
	distributionTableLoading: false,
	// 入库记录相关状态
	instockQueryParams: {} as any,
	instockTableParams: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
	instockTableData: [] as Sysinstockorder[], // 入库记录数据
	instockTableLoading: false,
	// 出库记录相关状态
	outstockQueryParams: {} as any,
	outstockTableParams: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
	outstockTableData: [] as Sysoutstockorder[], // 出库记录数据
	outstockTableLoading: false,
	// 出入库统计相关状态
	inoutStatsLoading: false,
	inoutStatsData: {
		totalInQuantity: 0, // 入库数量总和
		totalOutQuantity: 0, // 出库数量总和
		totalInAmount: 0, // 入库金额总和
		totalOutAmount: 0, // 出库金额总和
		allInoutData: [] as any[], // 所有出入库数据
	},
	inoutStatsTableParams: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
});

// 获取图片URL
const getImageUrl = (fileInfo: any) => {
	if (!fileInfo) return '';
	if (typeof fileInfo === 'string') {
		if (fileInfo.startsWith('http') || fileInfo.startsWith('/')) {
			return fileInfo;
		}
		return `/${fileInfo}`;
	}
	return '';
};

// 根据ID获取货品类型名称
const getGoodsTypeName = (goodsTypeId: any) => {
	if (!goodsTypeId) return '';
	const goodsType = state.goodsTypeList.find(item => item.id == goodsTypeId);
	return goodsType ? goodsType.goodsTypeName : '';
};

// 根据ID获取供应商名称
const getSupplierName = (supplierId: any) => {
	if (!supplierId) return '';
	const supplier = state.supplierList.find(item => item.id == supplierId);
	return supplier ? supplier.name : '';
};

// 根据ID获取客户名称
const getCustomerName = (customerId: any) => {
	if (!customerId) return '';
	const customer = state.customerList.find(item => item.id == customerId);
	return customer ? customer.customerName : '';
};


// 根据ID获取货品单位名称
const getGoodsUnitName = (unitId: any) => {
	if (!unitId) return '';
	const unit = state.goodsUnitList.find(item => (item?.value == unitId || item?.id == unitId));
	return unit ? (unit.label || unit.name) : '';
};

// 根据ID获取仓库名称
const getWarehouseName = (wareId: any) => {
	if (!wareId) return '';
	const warehouse = state.warehouseList.find(item => item.id == wareId);
	return warehouse ? warehouse.wareName : '';
};

// 根据ID获取部门名称
const getDepartmentName = (departmentId: any) => {
	if (!departmentId) return '';
	const department = state.departmentList.find(item => item.value == departmentId);
	return department ? department.label : '';
};

// 根据ID获取用户名称
const getUserName = (userId: any) => {
	if (!userId) return '';
	const user = state.userList.find(item => item.value == userId);
	return user ? user.label : '';
};

// 加载基础数据
const loadBaseData = async () => {
	// 加载货品类型列表
	try {
		const res = await goodsTypeModelApi.page({ page: 1, pageSize: 9999 });
		state.goodsTypeList = res.data.result?.items || [];
	} catch (_error) {
		console.error('加载货品类型列表失败:', _error);
	}

	// 加载供应商列表
	try {
		const res = await syssupplierApi.page({ page: 1, pageSize: 9999 });
		state.supplierList = res.data.result?.items || [];
	} catch (_error) {
		console.error('加载供应商列表失败:', _error);
	}

	// 加载客户列表
	try {
		const res = await syscustomerApi.page({ page: 1, pageSize: 9999 });
		state.customerList = res.data.result?.items || [];
	} catch (_error) {
		console.error('加载客户列表失败:', _error);
	}

	// 加载货品单位列表
	try {
		const res = await getDictDataList('GoodsEnumm');
		const dictData = res.data?.result || res.data || [];
		state.goodsUnitList = Array.isArray(dictData)
			? dictData.filter(item => item && (item.value !== null && item.value !== undefined))
			: [];
	} catch (_error) {
		console.error('加载货品单位列表失败:', _error);
	}

	// 加载仓库列表
	try {
		const res = await warehouseModelApi.page({ page: 1, pageSize: 9999 });
		state.warehouseList = res.data.result?.items || [];
	} catch (_error) {
		console.error('加载仓库列表失败:', _error);
	}

	// 加载库位列表
	try {
		const res = await warePlaceModelApi.page({ page: 1, pageSize: 9999 });
		state.warePlaceList = res.data.result?.items || [];
		console.log('库位列表数据:', state.warePlaceList);
	} catch (_error) {
		console.error('加载库位列表失败:', _error);
	}

	// 加载部门列表
	try {
		const res = await getDepartmentList();
		state.departmentList = Array.isArray(res) ? res : [];
	} catch (_error) {
		console.error('加载部门列表失败:', _error);
	}

	// 加载用户列表
	try {
		const res = await getUserList();
		let userList = res?.data?.result || res?.result || [];
		if (userList.length === 0) {
			userList = res?.data || res || [];
		}
		state.userList = userList.map((item: any) => ({
			...item,
			value: String(item.value),
			label: item.label
		}));
	} catch (_error) {
		console.error('加载用户列表失败:', _error);
	}
};

// 加载仓库详细信息
const loadWarehouseDetail = async (wareId: number) => {
	if (!wareId) {
		state.warehouseData = {};
		state.warehouseWarePlaces = [];
		return;
	}

	try {
		const res = await warehouseModelApi.detail(wareId);
		state.warehouseData = res.data.result || {};
		console.log('仓库详情数据:', state.warehouseData);
		
		// 加载该仓库的库位信息
		loadWarehouseWarePlaces();
	} catch (error) {
		console.error('加载仓库详情失败:', error);
		state.warehouseData = {};
		state.warehouseWarePlaces = [];
	}
};

// 加载仓库的库位信息
const loadWarehouseWarePlaces = () => {
	const warehouseWarePlaceIds = state.warehouseData.warePlaceId;
	
	if (!warehouseWarePlaceIds) {
		state.warehouseWarePlaces = [];
		return;
	}
	
	// 解析库位ID（支持逗号分隔的多个库位）
	const warePlaceIds = typeof warehouseWarePlaceIds === 'string' 
		? warehouseWarePlaceIds.split(',').map(id => id.trim()).filter(id => id)
		: Array.isArray(warehouseWarePlaceIds) 
		? warehouseWarePlaceIds 
		: [warehouseWarePlaceIds];
	
	// 过滤出该仓库分配的库位
	state.warehouseWarePlaces = state.warePlaceList.filter(warePlace => 
		warePlaceIds.some(id => 
			String(warePlace.id) === String(id) || warePlace.id == id
		)
	);
	
	console.log('仓库库位数据:', state.warehouseWarePlaces);
};

// 打开弹窗
const openDialog = async (id: number) => {
	state.showDialog = true;
	state.loading = true;

	// 加载基础数据
	await loadBaseData();

	// 加载货品详情
	try {
		const res = await goodsModelApi.detail(id);
		state.goodsData = res.data.result || {};
		console.log('货品详情数据:', state.goodsData);

		// 如果货品有关联仓库，加载仓库详情
		if (state.goodsData.goodsWareId) {
			await loadWarehouseDetail(state.goodsData.goodsWareId);
		}

		// 加载操作记录数据
		await loadOperationLogData();

		// 加载盘点记录数据
		await loadStocktakingData();

		// 加载调拨记录数据
		await loadTransferData();

		// 加载进货记录数据
		await loadPurchaseData();

		// 加载销售记录数据
		await loadSalesData();

		// 加载库存分布数据
		await loadDistributionData();

		// 加载入库记录数据
		await loadInstockData();

		// 加载出库记录数据
		await loadOutstockData();

		// 加载出入库统计数据
		await loadInoutStatsData();
	} catch (error) {
		console.error('加载货品详情失败:', error);
	} finally {
		state.loading = false;
	}
};

// 加载操作记录数据
const loadOperationLogData = async () => {
	state.operationLogTableLoading = true;
	try {
		const params: PageSysLogOpInput = {
			page: state.operationLogTableParams.page,
			pageSize: state.operationLogTableParams.pageSize,
			controllerName: 'goodsModel', // 只查询goodsModel模块的操作记录
			...state.operationLogQueryParams,
		};

		const res = await sysLogOpApi.page(params);
		const result = res.data?.result;

		state.operationLogTableData = result?.items || [];
		state.operationLogTableParams.total = result?.total || 0;

		console.log('操作记录数据加载成功:', state.operationLogTableData);
	} catch (error) {
		console.error('加载操作记录数据失败:', error);
	} finally {
		state.operationLogTableLoading = false;
	}
};

// 查询操作记录
const handleOperationLogQuery = () => {
	state.operationLogTableParams.page = 1; // 重置到第一页
	loadOperationLogData();
};

// 重置操作记录查询
const handleOperationLogReset = () => {
	state.operationLogQueryParams = {};
	state.operationLogTableParams.page = 1;
	loadOperationLogData();
};

// 操作记录分页变化
const handleOperationLogPageChange = (page: number) => {
	state.operationLogTableParams.page = page;
	loadOperationLogData();
};

// 操作记录页大小变化
const handleOperationLogSizeChange = (size: number) => {
	state.operationLogTableParams.pageSize = size;
	state.operationLogTableParams.page = 1;
	loadOperationLogData();
};

// 加载盘点记录数据
const loadStocktakingData = async () => {
	state.stocktakingTableLoading = true;
	try {
		// 根据货品编码查询盘点记录：货品表的goodsCode对应盘点表的goodsName
		const params = {
			page: state.stocktakingTableParams.page,
			pageSize: state.stocktakingTableParams.pageSize,
			goodsName: state.goodsData.goodsCode, // 将货品编码作为盘点货品名称查询
			...state.stocktakingQueryParams,
		};

		const res = await sysstocktakingorderApi.page(params);
		const result = res.data?.result;

		state.stocktakingTableData = result?.items || [];
		state.stocktakingTableParams.total = result?.total || 0;

		console.log(`盘点记录数据加载成功 (货品编码: ${state.goodsData.goodsCode} -> 盘点货品: ${state.goodsData.goodsCode}):`, state.stocktakingTableData);
	} catch (error) {
		console.error('加载盘点记录数据失败:', error);
		state.stocktakingTableData = [];
		state.stocktakingTableParams.total = 0;
	} finally {
		state.stocktakingTableLoading = false;
	}
};

// 查询盘点记录
const handleStocktakingQuery = () => {
	state.stocktakingTableParams.page = 1; // 重置到第一页
	loadStocktakingData();
};

// 重置盘点记录查询
const handleStocktakingReset = () => {
	state.stocktakingQueryParams = {};
	state.stocktakingTableParams.page = 1;
	loadStocktakingData();
};

// 盘点记录分页变化
const handleStocktakingPageChange = (page: number) => {
	state.stocktakingTableParams.page = page;
	loadStocktakingData();
};

// 盘点记录页大小变化
const handleStocktakingSizeChange = (size: number) => {
	state.stocktakingTableParams.pageSize = size;
	state.stocktakingTableParams.page = 1;
	loadStocktakingData();
};

// 跳转到盘点单表管理
const goToStocktakingOrder = () => {
	router.push('/OutWarehou/sysstocktakingorder');
};

// 加载调拨记录数据
const loadTransferData = async () => {
	state.transferTableLoading = true;
	try {
		// 根据货品名称查询调拨记录：货品表的goodsName对应调拨表的goodsName
		const params = {
			page: state.transferTableParams.page,
			pageSize: state.transferTableParams.pageSize,
			goodsName: state.goodsData.goodsName, // 使用货品名称作为查询条件
			...state.transferQueryParams,
		};

		const res = await systransferorderApi.page(params);
		const result = res.data?.result;

		state.transferTableData = result?.items || [];
		state.transferTableParams.total = result?.total || 0;

		console.log(`调拨记录数据加载成功 (货品名称: ${state.goodsData.goodsName}):`, state.transferTableData);
	} catch (error) {
		console.error('加载调拨记录数据失败:', error);
		state.transferTableData = [];
		state.transferTableParams.total = 0;
	} finally {
		state.transferTableLoading = false;
	}
};

// 查询调拨记录
const handleTransferQuery = () => {
	state.transferTableParams.page = 1; // 重置到第一页
	loadTransferData();
};

// 重置调拨记录查询
const handleTransferReset = () => {
	state.transferQueryParams = {};
	state.transferTableParams.page = 1;
	loadTransferData();
};

// 调拨记录分页变化
const handleTransferPageChange = (page: number) => {
	state.transferTableParams.page = page;
	loadTransferData();
};

// 调拨记录页大小变化
const handleTransferSizeChange = (size: number) => {
	state.transferTableParams.pageSize = size;
	state.transferTableParams.page = 1;
	loadTransferData();
};

// 跳转到调拨单表管理
const goToTransferOrder = () => {
	router.push('/OutWarehou/systransferorder');
};

// 加载进货记录数据
const loadPurchaseData = async () => {
	state.purchaseTableLoading = true;
	try {
		// 根据货品名称查询进货记录
		const params = {
			page: state.purchaseTableParams.page,
			pageSize: state.purchaseTableParams.pageSize,
			goodsName: state.goodsData.goodsName, // 使用货品名称作为查询条件
			...state.purchaseQueryParams,
		};

		const res = await syspurchaseorderApi.page(params);
		const result = res.data?.result;

		state.purchaseTableData = result?.items || [];
		state.purchaseTableParams.total = result?.total || 0;

		console.log(`进货记录数据加载成功 (货品名称: ${state.goodsData.goodsName}):`, state.purchaseTableData);
	} catch (error) {
		console.error('加载进货记录数据失败:', error);
		state.purchaseTableData = [];
		state.purchaseTableParams.total = 0;
	} finally {
		state.purchaseTableLoading = false;
	}
};

// 查询进货记录
const handlePurchaseQuery = () => {
	state.purchaseTableParams.page = 1; // 重置到第一页
	loadPurchaseData();
};

// 重置进货记录查询
const handlePurchaseReset = () => {
	state.purchaseQueryParams = {};
	state.purchaseTableParams.page = 1;
	loadPurchaseData();
};

// 进货记录分页变化
const handlePurchasePageChange = (page: number) => {
	state.purchaseTableParams.page = page;
	loadPurchaseData();
};

// 进货记录页大小变化
const handlePurchaseSizeChange = (size: number) => {
	state.purchaseTableParams.pageSize = size;
	state.purchaseTableParams.page = 1;
	loadPurchaseData();
};

// 跳转到进货订单管理
const goToPurchaseOrder = () => {
	router.push('/order/syspurchaseorder');
};

// 加载销售记录数据
const loadSalesData = async () => {
	state.salesTableLoading = true;
	try {
		// 根据货品名称查询销售记录
		const params = {
			page: state.salesTableParams.page,
			pageSize: state.salesTableParams.pageSize,
			goodsName: state.goodsData.goodsName, // 使用货品名称作为查询条件
			...state.salesQueryParams,
		};

		const res = await syssalesorderApi.page(params);
		const result = res.data?.result;

		state.salesTableData = result?.items || [];
		state.salesTableParams.total = result?.total || 0;

		console.log(`销售记录数据加载成功 (货品名称: ${state.goodsData.goodsName}):`, state.salesTableData);
	} catch (error) {
		console.error('加载销售记录数据失败:', error);
		state.salesTableData = [];
		state.salesTableParams.total = 0;
	} finally {
		state.salesTableLoading = false;
	}
};

// 查询销售记录
const handleSalesQuery = () => {
	state.salesTableParams.page = 1; // 重置到第一页
	loadSalesData();
};

// 重置销售记录查询
const handleSalesReset = () => {
	state.salesQueryParams = {};
	state.salesTableParams.page = 1;
	loadSalesData();
};

// 销售记录分页变化
const handleSalesPageChange = (page: number) => {
	state.salesTableParams.page = page;
	loadSalesData();
};

// 销售记录页大小变化
const handleSalesSizeChange = (size: number) => {
	state.salesTableParams.pageSize = size;
	state.salesTableParams.page = 1;
	loadSalesData();
};

// 跳转到销售订单管理
const goToSalesOrder = () => {
	router.push('/order/syssalesorder');
};

// 加载库存分布数据
const loadDistributionData = async () => {
	state.distributionTableLoading = true;
	try {
		// 根据货品名称查询库存分布
		const params = {
			page: state.distributionTableParams.page,
			pageSize: state.distributionTableParams.pageSize,
			goodsName: state.goodsData.goodsName, // 使用货品名称作为查询条件
			...state.distributionQueryParams,
		};

		const res = await inventoryQueryApi.getStockDistribution(params);
		const result = res.data?.result;

		state.distributionTableData = result?.items || [];
		state.distributionTableParams.total = result?.total || 0;

		console.log(`库存分布数据加载成功 (货品名称: ${state.goodsData.goodsName}):`, state.distributionTableData);
	} catch (error) {
		console.error('加载库存分布数据失败:', error);
		state.distributionTableData = [];
		state.distributionTableParams.total = 0;
	} finally {
		state.distributionTableLoading = false;
	}
};

// 加载入库记录数据
const loadInstockData = async () => {
	state.instockTableLoading = true;
	try {
		// 根据货品编码或货品名称查询入库记录
		const params = {
			page: state.instockTableParams.page,
			pageSize: state.instockTableParams.pageSize,
			goodsName: state.goodsData.goodsName, // 使用货品名称作为查询条件
			...state.instockQueryParams,
		};

		const res = await sysinstockorderApi.page(params);
		const result = res.data?.result;

		state.instockTableData = result?.items || [];
		state.instockTableParams.total = result?.total || 0;

		console.log(`入库记录数据加载成功 (货品名称: ${state.goodsData.goodsName}):`, state.instockTableData);
	} catch (error) {
		console.error('加载入库记录数据失败:', error);
		state.instockTableData = [];
		state.instockTableParams.total = 0;
	} finally {
		state.instockTableLoading = false;
	}
};

// 查询入库记录
const handleInstockQuery = () => {
	state.instockTableParams.page = 1; // 重置到第一页
	loadInstockData();
};

// 重置入库记录查询
const handleInstockReset = () => {
	state.instockQueryParams = {};
	state.instockTableParams.page = 1;
	loadInstockData();
};

// 入库记录分页变化
const handleInstockPageChange = (page: number) => {
	state.instockTableParams.page = page;
	loadInstockData();
};

// 入库记录页大小变化
const handleInstockSizeChange = (size: number) => {
	state.instockTableParams.pageSize = size;
	state.instockTableParams.page = 1;
	loadInstockData();
};

// 跳转到入库单表管理
const goToInstockOrder = () => {
	router.push('/OutWarehou/sysinstockorder');
};

// 加载出库记录数据
const loadOutstockData = async () => {
	state.outstockTableLoading = true;
	try {
		// 根据货品编码或货品名称查询出库记录
		const params = {
			page: state.outstockTableParams.page,
			pageSize: state.outstockTableParams.pageSize,
			goodsName: state.goodsData.goodsName, // 使用货品名称作为查询条件
			...state.outstockQueryParams,
		};

		const res = await sysoutstockorderApi.page(params);
		const result = res.data?.result;

		state.outstockTableData = result?.items || [];
		state.outstockTableParams.total = result?.total || 0;

		console.log(`出库记录数据加载成功 (货品名称: ${state.goodsData.goodsName}):`, state.outstockTableData);
	} catch (error) {
		console.error('加载出库记录数据失败:', error);
		state.outstockTableData = [];
		state.outstockTableParams.total = 0;
	} finally {
		state.outstockTableLoading = false;
	}
};

// 查询出库记录
const handleOutstockQuery = () => {
	state.outstockTableParams.page = 1; // 重置到第一页
	loadOutstockData();
};

// 重置出库记录查询
const handleOutstockReset = () => {
	state.outstockQueryParams = {};
	state.outstockTableParams.page = 1;
	loadOutstockData();
};

// 出库记录分页变化
const handleOutstockPageChange = (page: number) => {
	state.outstockTableParams.page = page;
	loadOutstockData();
};

// 出库记录页大小变化
const handleOutstockSizeChange = (size: number) => {
	state.outstockTableParams.pageSize = size;
	state.outstockTableParams.page = 1;
	loadOutstockData();
};

// 跳转到出库单表管理
const goToOutstockOrder = () => {
	router.push('/OutWarehou/sysoutstockorder');
};

// 加载出入库统计数据
const loadInoutStatsData = async () => {
	state.inoutStatsLoading = true;
	try {
		// 获取所有入库记录数据（不分页）
		const instockParams = {
			page: 1,
			pageSize: 9999, // 获取所有数据
			goodsName: state.goodsData.goodsName,
		};
		const instockRes = await sysinstockorderApi.page(instockParams);
		const instockData = instockRes.data?.result?.items || [];

		// 获取所有出库记录数据（不分页）
		const outstockParams = {
			page: 1,
			pageSize: 9999, // 获取所有数据
			goodsName: state.goodsData.goodsName,
		};
		const outstockRes = await sysoutstockorderApi.page(outstockParams);
		const outstockData = outstockRes.data?.result?.items || [];

		// 计算入库统计
		let totalInQuantity = 0;
		let totalInAmount = 0;
		instockData.forEach((item: any) => {
			totalInQuantity += Number(item.inQuantity) || 0;
			totalInAmount += Number(item.warehouseAmount) || 0;
		});

		// 计算出库统计
		let totalOutQuantity = 0;
		let totalOutAmount = 0;
		outstockData.forEach((item: any) => {
			totalOutQuantity += Number(item.outQuantity) || 0;
			totalOutAmount += Number(item.outbouAmount) || 0;
		});

		// 合并所有出入库数据，添加类型标识
		const allInoutData = [
			...instockData.map((item: any) => ({
				...item,
				type: 'instock',
				typeName: '入库',
				date: item.inDate,
				quantity: item.inQuantity,
				amount: item.warehouseAmount,
				warehouseName: item.warehouseName,
				relatedCode: item.relatedCode,
				agentName: item.agentName,
				documentStatus: item.documentStatus,
				remark: item.remark,
				createTime: item.createTime,
				createUserName: item.createUserName,
			})),
			...outstockData.map((item: any) => ({
				...item,
				type: 'outstock',
				typeName: '出库',
				date: item.outDate,
				quantity: item.outQuantity,
				amount: item.outbouAmount,
				warehouseName: item.warehouseName,
				relatedCode: item.relatedCode,
				agentName: item.customerName, // 出库用客户名称
				documentStatus: item.documentStatus,
				remark: item.remark,
				createTime: item.createTime,
				createUserName: item.createUserName,
			})),
		];

		// 按创建时间倒序排列
		allInoutData.sort((a, b) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime());

		// 更新统计数据
		state.inoutStatsData = {
			totalInQuantity,
			totalOutQuantity,
			totalInAmount,
			totalOutAmount,
			allInoutData,
		};

		// 更新分页总数
		state.inoutStatsTableParams.total = allInoutData.length;

		console.log(`出入库统计数据加载成功 (货品名称: ${state.goodsData.goodsName}):`, {
			totalInQuantity,
			totalOutQuantity,
			totalInAmount,
			totalOutAmount,
			totalRecords: allInoutData.length,
		});
	} catch (error) {
		console.error('加载出入库统计数据失败:', error);
		state.inoutStatsData = {
			totalInQuantity: 0,
			totalOutQuantity: 0,
			totalInAmount: 0,
			totalOutAmount: 0,
			allInoutData: [],
		};
	} finally {
		state.inoutStatsLoading = false;
	}
};

// 获取分页后的出入库统计数据
const getPaginatedInoutData = () => {
	const { page, pageSize } = state.inoutStatsTableParams;
	const startIndex = (page - 1) * pageSize;
	const endIndex = startIndex + pageSize;
	return state.inoutStatsData.allInoutData.slice(startIndex, endIndex);
};

// 出入库统计分页变化
const handleInoutStatsPageChange = (page: number) => {
	state.inoutStatsTableParams.page = page;
};

// 出入库统计页大小变化
const handleInoutStatsSizeChange = (size: number) => {
	state.inoutStatsTableParams.pageSize = size;
	state.inoutStatsTableParams.page = 1;
};

// 关闭弹窗
const closeDialog = () => {
	state.showDialog = false;
	state.goodsData = {};
	state.warehouseData = {};
	state.activeTab = 'basic';
	// 重置操作记录相关状态
	state.operationLogQueryParams = {};
	state.operationLogTableParams = {
		page: 1,
		pageSize: 10,
		total: 0,
	};
	state.operationLogTableData = [];
	// 重置盘点记录相关状态
	state.stocktakingQueryParams = {};
	state.stocktakingTableParams = {
		page: 1,
		pageSize: 10,
		total: 0,
	};
	state.stocktakingTableData = [];
	// 重置调拨记录相关状态
	state.transferQueryParams = {};
	state.transferTableParams = {
		page: 1,
		pageSize: 10,
		total: 0,
	};
	state.transferTableData = [];
	// 重置进货记录相关状态
	state.purchaseQueryParams = {};
	state.purchaseTableParams = {
		page: 1,
		pageSize: 10,
		total: 0,
	};
	state.purchaseTableData = [];
	// 重置销售记录相关状态
	state.salesQueryParams = {};
	state.salesTableParams = {
		page: 1,
		pageSize: 10,
		total: 0,
	};
	state.salesTableData = [];
	// 重置库存分布相关状态
	state.distributionQueryParams = {};
	state.distributionTableParams = {
		page: 1,
		pageSize: 10,
		total: 0,
	};
	state.distributionTableData = [];
	// 重置入库记录相关状态
	state.instockQueryParams = {};
	state.instockTableParams = {
		page: 1,
		pageSize: 10,
		total: 0,
	};
	state.instockTableData = [];
	// 重置出库记录相关状态
	state.outstockQueryParams = {};
	state.outstockTableParams = {
		page: 1,
		pageSize: 10,
		total: 0,
	};
	state.outstockTableData = [];
	// 重置出入库统计相关状态
	state.inoutStatsData = {
		totalInQuantity: 0,
		totalOutQuantity: 0,
		totalInAmount: 0,
		totalOutAmount: 0,
		allInoutData: [],
	};
	state.inoutStatsTableParams = {
		page: 1,
		pageSize: 10,
		total: 0,
	};
};

// 将函数暴露给父组件
defineExpose({ openDialog });
</script>

<template>
	<div class="goodsModel-detail-container">
		<el-dialog v-model="state.showDialog" :width="1400" draggable :close-on-click-modal="false" @close="closeDialog"
			class="goods-detail-dialog">
			<template #header>
				<div style="color: #fff">
					<span>货品详情 {{ state.goodsData.goodsCode }}</span>
				</div>
			</template>

			<div v-loading="state.loading" class="dialog-content">
				<!-- 基本信息卡片 -->
				<el-card shadow="hover" class="info-card">
					<template #header>
						<div class="card-header">
							<span>基本信息</span>
						</div>
					</template>

					<el-row :gutter="20">
						<!-- 左侧：货品图片 -->
						<el-col :span="6">
							<div class="goods-image-container">
								<el-image v-if="state.goodsData.goodsPic" :src="getImageUrl(state.goodsData.goodsPic)"
									fit="contain" :preview-src-list="[getImageUrl(state.goodsData.goodsPic)]"
									:preview-teleported="true"
									style="width: 100%; height: 200px; border: 1px solid #dcdfe6; border-radius: 4px;">
									<template #error>
										<div
											style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: #f5f7fa; color: #909399;">
											<el-icon :size="50"><ele-Picture /></el-icon>
										</div>
									</template>
								</el-image>
								<div v-else
									style="width: 100%; height: 200px; border: 1px solid #dcdfe6; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: #f5f7fa; color: #909399;">
									<el-icon :size="50"><ele-Picture /></el-icon>
								</div>
							</div>
						</el-col>

						<!-- 右侧：基本信息 -->
						<el-col :span="18">
							<el-descriptions :column="2" border>
								<el-descriptions-item label="货品编码" label-class-name="detail-label">
									<span class="detail-value">{{ state.goodsData.goodsCode }}</span>
								</el-descriptions-item>
								<el-descriptions-item label="货品名称" label-class-name="detail-label">
									<span class="detail-value">{{ state.goodsData.goodsName }}</span>
								</el-descriptions-item>
								<el-descriptions-item label="货品类型" label-class-name="detail-label">
									<span class="detail-value">{{ getGoodsTypeName(state.goodsData.goodsTypeId)
									}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="货品规格型号" label-class-name="detail-label">
									<span class="detail-value">{{ state.goodsData.goodsSpecs }}</span>
								</el-descriptions-item>
								<el-descriptions-item label="供应商" label-class-name="detail-label">
									<span class="detail-value">{{ getSupplierName(state.goodsData.goodsSupplierId)
									}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="客户" label-class-name="detail-label">
									<span class="detail-value">{{ getCustomerName(state.goodsData.goodsCustomerId)
									}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="入库参考价/元" label-class-name="detail-label">
									<span class="detail-value price">{{ state.goodsData.goodsIntoMoney || '0.00'
									}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="出库参考价/元" label-class-name="detail-label">
									<span class="detail-value price">{{ state.goodsData.goodsOutMoney || '0.00'
									}}</span>
								</el-descriptions-item>
							</el-descriptions>
						</el-col>
					</el-row>

					<!-- 系统信息区域 -->
					<div class="system-info">
						<el-row :gutter="20">
							<el-col :span="6">
								<span class="info-label">创建人</span>
								<span class="info-value">{{ state.goodsData.createUserName || 'admin' }}</span>
							</el-col>
							<el-col :span="6">
								<span class="info-label">创建时间</span>
								<span class="info-value">{{ state.goodsData.createTime || '-' }}</span>
							</el-col>
							<el-col :span="6">
								<span class="info-label">更新人</span>
								<span class="info-value">{{ state.goodsData.updateUserName || '-' }}</span>
							</el-col>
							<el-col :span="6">
								<span class="info-label">更新时间</span>
								<span class="info-value">{{ state.goodsData.updateTime || '-' }}</span>
							</el-col>
						</el-row>
					</div>
				</el-card>

				<!-- 详细信息和业务记录标签页 -->
				<el-card shadow="hover" class="info-card" style="margin-top: 10px;">
					<el-tabs v-model="state.activeTab">
						<!-- 其他信息标签页 -->
						<el-tab-pane label="其他信息" name="basic">
							<el-descriptions :column="2" border>
								<el-descriptions-item label="货品状态" label-class-name="detail-label">
									<el-tag v-if="state.goodsData.goodsType" type="success">启用</el-tag>
									<el-tag v-else type="danger">禁用</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="保质期管理" label-class-name="detail-label">
									<el-tag v-if="state.goodsData.goodsExpiration" type="success">是</el-tag>
									<el-tag v-else type="info">否</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="保质期" label-class-name="detail-label"
									v-if="state.goodsData.goodsExpiration">
									<span class="detail-value">{{ state.goodsData.goodsExpirationNum || '-' }}</span>
								</el-descriptions-item>
								<el-descriptions-item label="预警天数" label-class-name="detail-label"
									v-if="state.goodsData.goodsExpiration">
									<span class="detail-value">{{ state.goodsData.goodsWarning || '-' }}</span>
								</el-descriptions-item>
								<el-descriptions-item label="货品单位" label-class-name="detail-label">
									<span class="detail-value">{{ getGoodsUnitName(state.goodsData.goodsUnitId) || '-'
									}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="货品仓库" label-class-name="detail-label">
									<span class="detail-value">{{ getWarehouseName(state.goodsData.goodsWareId) || '-'
									}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="货品备注" :span="2" label-class-name="detail-label">
									<span class="detail-value">{{ state.goodsData.goodsNote || '-' }}</span>
								</el-descriptions-item>
							</el-descriptions>
						</el-tab-pane>

						<!-- 库位信息标签页 -->
						<el-tab-pane label="库位信息" name="inventory">
							<div v-if="state.warehouseData && state.warehouseData.id">
								<!-- 仓库信息 -->
								<el-card class="warehouse-info-card" shadow="never">
									<template #header>
										<div class="card-header">
											<span class="card-title">仓库信息</span>
										</div>
									</template>
									<el-descriptions :column="2" border>
										<el-descriptions-item label="仓库编码" label-class-name="detail-label">
											<span class="detail-value">{{ state.warehouseData.wareCode || '-' }}</span>
										</el-descriptions-item>
										<el-descriptions-item label="仓库名称" label-class-name="detail-label">
											<span class="detail-value">{{ state.warehouseData.wareName || '-' }}</span>
										</el-descriptions-item>
										<el-descriptions-item label="仓库容量" label-class-name="detail-label">
											<span class="detail-value">{{ state.warehouseData.wareVolume || '-' }}</span>
										</el-descriptions-item>
										<el-descriptions-item label="库管部门" label-class-name="detail-label">
											<span class="detail-value">{{
												getDepartmentName(state.warehouseData.departmentId) || '-'
											}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="仓库主管" label-class-name="detail-label">
											<span class="detail-value">{{ getUserName(state.warehouseData.userId) || '-'
											}}</span>
										</el-descriptions-item>
										<el-descriptions-item label="仓库地址" label-class-name="detail-label">
											<span class="detail-value">{{ state.warehouseData.wareAddr || '-' }}</span>
										</el-descriptions-item>
										<el-descriptions-item label="仓库状态" label-class-name="detail-label">
											<el-tag v-if="state.warehouseData.wareType" type="success">启用</el-tag>
											<el-tag v-else type="danger">禁用</el-tag>
										</el-descriptions-item>
										<el-descriptions-item label="仓库锁定" label-class-name="detail-label">
											<el-tag v-if="state.warehouseData.wareLock" type="warning">已锁定</el-tag>
											<el-tag v-else type="success">未锁定</el-tag>
										</el-descriptions-item>
										<el-descriptions-item label="仓库备注" :span="2" label-class-name="detail-label">
											<span class="detail-value">{{ state.warehouseData.wareNote || '-' }}</span>
										</el-descriptions-item>
									</el-descriptions>
								</el-card>

								<!-- 库位信息列表 -->
								<el-card class="warehouse-places-card" shadow="never" style="margin-top: 20px;">
									<template #header>
										<div class="card-header">
											<span class="card-title">库位信息</span>
											<el-tag type="info" size="small">共 {{ state.warehouseWarePlaces.length }} 个库位</el-tag>
										</div>
									</template>
									
									<div v-if="state.warehouseWarePlaces.length > 0">
										<el-table :data="state.warehouseWarePlaces" border style="width: 100%">
											<el-table-column type="index" label="序号" width="60" align="center" />
											<el-table-column prop="warePlaceCode" label="库位编码" min-width="120" show-overflow-tooltip />
											<el-table-column prop="warePlaceName" label="库位名称" min-width="120" show-overflow-tooltip />
											<el-table-column prop="warePlaceVolume" label="库位容量/m³" min-width="120" align="right" show-overflow-tooltip />
											<el-table-column prop="userId" label="库位主管" min-width="120" show-overflow-tooltip>
												<template #default="scope">
													{{ getUserName(scope.row.userId) || '-' }}
												</template>
											</el-table-column>
											<el-table-column prop="warePlaceType" label="库位状态" width="100" align="center">
												<template #default="scope">
													<el-tag v-if="scope.row.warePlaceType" type="success">启用</el-tag>
													<el-tag v-else type="danger">停用</el-tag>
												</template>
											</el-table-column>
											<el-table-column prop="shopName" label="商品名称" min-width="120" show-overflow-tooltip>
												<template #default="scope">
													{{ scope.row.shopName || '-' }}
												</template>
											</el-table-column>
											<el-table-column prop="warePlaceNote" label="库位备注" min-width="150" show-overflow-tooltip>
												<template #default="scope">
													{{ scope.row.warePlaceNote || '-' }}
												</template>
											</el-table-column>
										</el-table>
									</div>
									
									<el-empty v-else description="该仓库未分配库位" />
								</el-card>
							</div>
							<el-empty v-else description="该货品未关联仓库" />
						</el-tab-pane>

						<!-- 入库记录 -->
						<el-tab-pane label="入库记录" name="instock">
							<!-- 当前货品信息提示 -->
							<el-alert :title="`当前查询货品：${state.goodsData.goodsName}`" type="info" :closable="false"
								style="margin-bottom: 15px;">
							</el-alert>

							<!-- 查询条件 -->
							<el-form :model="state.instockQueryParams" inline style="margin-bottom: 10px;">
								<el-form-item label="入库单号">
									<el-input v-model="state.instockQueryParams.code" placeholder="请输入入库单号"
										clearable style="width: 200px;" />
								</el-form-item>
								<el-form-item label="入库类型">
									<el-input v-model="state.instockQueryParams.inType" placeholder="请输入入库类型"
										clearable style="width: 150px;" />
								</el-form-item>
								<el-form-item label="仓库名称">
									<el-input v-model="state.instockQueryParams.warehouseName" placeholder="请输入仓库名称"
										clearable style="width: 150px;" />
								</el-form-item>
								<el-form-item label="">
									<el-button-group>
										<el-button type="primary" icon="ele-Search"
											@click="handleInstockQuery">查询</el-button>
										<el-button icon="ele-Refresh" style="margin-left: 10px;"
											@click="handleInstockReset">重置</el-button>
									</el-button-group>
								</el-form-item>
							</el-form>

							<!-- 无数据时的友好提示 -->
							<div v-if="!state.instockTableLoading && state.instockTableData.length === 0"
								style="text-align: center; padding: 40px 0; color: #909399;">
								<el-icon :size="64" style="margin-bottom: 16px;"><ele-DocumentRemove /></el-icon>
								<div style="font-size: 16px; margin-bottom: 8px;">
									货品 <strong style="color: #409EFF;">{{ state.goodsData.goodsName }}</strong>
									还未有入库记录数据
								</div>
								<div style="font-size: 14px;">
									如有需要，请前往出入库管理中的系统入库单表管理进行入库
									<el-button type="primary" size="small"
										@click="goToInstockOrder">点击跳转</el-button>
								</div>
							</div>

							<!-- 入库记录表格 -->
							<el-table v-if="state.instockTableData.length > 0 || state.instockTableLoading"
								:data="state.instockTableData" style="width: 100%"
								v-loading="state.instockTableLoading" border
								:empty-text="`货品 ${state.goodsData.goodsName} 还未有入库记录数据`" size="small">
								<el-table-column type="index" label="序号" width="60" align="center" />
								<el-table-column prop="code" label="入库单号" min-width="120" show-overflow-tooltip />
								<el-table-column prop="inDate" label="入库日期" min-width="120" show-overflow-tooltip />
								<el-table-column prop="inType" label="入库类型" min-width="100" show-overflow-tooltip />
								<el-table-column prop="warehouseName" label="仓库名称" min-width="120" show-overflow-tooltip>
									<template #default="scope">
										{{ getWarehouseName(scope.row.warehouseName) || scope.row.warehouseName || '-' }}
									</template>
								</el-table-column>
								<el-table-column prop="relatedCode" label="关联单号" min-width="120" show-overflow-tooltip />
								<el-table-column prop="agentName" label="经办人" min-width="100" show-overflow-tooltip />
								<el-table-column prop="inQuantity" label="入库数量" width="100" align="right" show-overflow-tooltip />
								<el-table-column prop="warehouseAmount" label="入库金额" width="120" align="right" show-overflow-tooltip>
									<template #default="scope">
										<span style="color: #67C23A; font-weight: bold;">
											{{ scope.row.warehouseAmount ? scope.row.warehouseAmount.toFixed(2) : '0.00' }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="documentStatus" label="单据状态" width="100" align="center">
									<template #default="scope">
										<g-sys-dict v-model="scope.row.documentStatus" code="DocumentStatusEnum" />
									</template>
								</el-table-column>
								<el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
								<el-table-column prop="createUserName" label="创建人" min-width="100" show-overflow-tooltip />
								<el-table-column prop="createTime" label="创建时间" min-width="140" show-overflow-tooltip />
							</el-table>

							<!-- 分页 -->
							<div v-if="state.instockTableData.length > 0"
								style="display: flex; justify-content: flex-end; margin-top: 10px;">
								<el-pagination v-model:currentPage="state.instockTableParams.page"
									v-model:page-size="state.instockTableParams.pageSize"
									:total="state.instockTableParams.total" :page-sizes="[10, 20, 50, 100]"
									layout="total, sizes, prev, pager, next, jumper" size="small" background
									@current-change="handleInstockPageChange"
									@size-change="handleInstockSizeChange" />
							</div>
						</el-tab-pane>

						<!-- 出库记录 -->
						<el-tab-pane label="出库记录" name="outstock">
							<!-- 当前货品信息提示 -->
							<el-alert :title="`当前查询货品：${state.goodsData.goodsName}`" type="info" :closable="false"
								style="margin-bottom: 15px;">
							</el-alert>

							<!-- 查询条件 -->
							<el-form :model="state.outstockQueryParams" inline style="margin-bottom: 10px;">
								<el-form-item label="出库单号">
									<el-input v-model="state.outstockQueryParams.code" placeholder="请输入出库单号"
										clearable style="width: 200px;" />
								</el-form-item>
								<el-form-item label="出库类型">
									<el-input v-model="state.outstockQueryParams.outType" placeholder="请输入出库类型"
										clearable style="width: 150px;" />
								</el-form-item>
								<el-form-item label="客户名称">
									<el-input v-model="state.outstockQueryParams.customerName" placeholder="请输入客户名称"
										clearable style="width: 150px;" />
								</el-form-item>
								<el-form-item label="">
									<el-button-group>
										<el-button type="primary" icon="ele-Search"
											@click="handleOutstockQuery">查询</el-button>
										<el-button icon="ele-Refresh" style="margin-left: 10px;"
											@click="handleOutstockReset">重置</el-button>
									</el-button-group>
								</el-form-item>
							</el-form>

							<!-- 无数据时的友好提示 -->
							<div v-if="!state.outstockTableLoading && state.outstockTableData.length === 0"
								style="text-align: center; padding: 40px 0; color: #909399;">
								<el-icon :size="64" style="margin-bottom: 16px;"><ele-DocumentRemove /></el-icon>
								<div style="font-size: 16px; margin-bottom: 8px;">
									货品 <strong style="color: #409EFF;">{{ state.goodsData.goodsName }}</strong>
									还未有出库记录数据
								</div>
								<div style="font-size: 14px;">
									如有需要，请前往出入库管理中的系统出库单表管理进行出库
									<el-button type="primary" size="small"
										@click="goToOutstockOrder">点击跳转</el-button>
								</div>
							</div>

							<!-- 出库记录表格 -->
							<el-table v-if="state.outstockTableData.length > 0 || state.outstockTableLoading"
								:data="state.outstockTableData" style="width: 100%"
								v-loading="state.outstockTableLoading" border
								:empty-text="`货品 ${state.goodsData.goodsName} 还未有出库记录数据`" size="small">
								<el-table-column type="index" label="序号" width="60" align="center" />
								<el-table-column prop="code" label="出库单号" min-width="120" show-overflow-tooltip />
								<el-table-column prop="outDate" label="出库日期" min-width="120" show-overflow-tooltip />
								<el-table-column prop="outType" label="出库类型" min-width="100" show-overflow-tooltip />
								<el-table-column prop="warehouseName" label="仓库名称" min-width="120" show-overflow-tooltip>
									<template #default="scope">
										{{ getWarehouseName(scope.row.warehouseName) || scope.row.warehouseName || '-' }}
									</template>
								</el-table-column>
								<el-table-column prop="relatedCode" label="关联单号" min-width="120" show-overflow-tooltip />
								<el-table-column prop="customerName" label="客户名称" min-width="120" show-overflow-tooltip />
								<el-table-column prop="contactPerson" label="联系人" min-width="100" show-overflow-tooltip />
								<el-table-column prop="contactMethod" label="联系方式" min-width="120" show-overflow-tooltip />
								<el-table-column prop="outQuantity" label="出库数量" width="100" align="right" show-overflow-tooltip />
								<el-table-column prop="outbouAmount" label="出库金额" width="120" align="right" show-overflow-tooltip>
									<template #default="scope">
										<span style="color: #f56c6c; font-weight: bold;">
											{{ scope.row.outbouAmount ? scope.row.outbouAmount.toFixed(2) : '0.00' }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="documentStatus" label="单据状态" width="100" align="center">
									<template #default="scope">
										<g-sys-dict v-model="scope.row.documentStatus" code="DocumentStatusEnum" />
									</template>
								</el-table-column>
								<el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
								<el-table-column prop="createUserName" label="创建人" min-width="100" show-overflow-tooltip />
								<el-table-column prop="createTime" label="创建时间" min-width="140" show-overflow-tooltip />
							</el-table>

							<!-- 分页 -->
							<div v-if="state.outstockTableData.length > 0"
								style="display: flex; justify-content: flex-end; margin-top: 10px;">
								<el-pagination v-model:currentPage="state.outstockTableParams.page"
									v-model:page-size="state.outstockTableParams.pageSize"
									:total="state.outstockTableParams.total" :page-sizes="[10, 20, 50, 100]"
									layout="total, sizes, prev, pager, next, jumper" size="small" background
									@current-change="handleOutstockPageChange"
									@size-change="handleOutstockSizeChange" />
							</div>
						</el-tab-pane>

						<!-- 盘点记录 -->
						<el-tab-pane label="盘点记录" name="stocktaking">
							<!-- 当前货品信息提示 -->
							<el-alert :title="`当前查询货品：${state.goodsData.goodsName}`" type="info" :closable="false"
								style="margin-bottom: 15px;">
							</el-alert>

							<!-- 查询条件 -->
							<el-form :model="state.stocktakingQueryParams" inline style="margin-bottom: 10px;">
								<el-form-item label="盘点单号">
									<el-input v-model="state.stocktakingQueryParams.code" placeholder="请输入盘点单号"
										clearable style="width: 200px;" />
								</el-form-item>
								<el-form-item label="盘点类型">
									<el-input v-model="state.stocktakingQueryParams.stockTakingType"
										placeholder="请输入盘点类型" clearable style="width: 150px;" />
								</el-form-item>
								<el-form-item label="仓库名称">
									<el-input v-model="state.stocktakingQueryParams.warehouseName" placeholder="请输入仓库名称"
										clearable style="width: 150px;" />
								</el-form-item>
								<el-form-item label="">
									<el-button-group>
										<el-button type="primary" icon="ele-Search"
											@click="handleStocktakingQuery">查询</el-button>
										<el-button icon="ele-Refresh" style="margin-left: 10px;"
											@click="handleStocktakingReset">重置</el-button>
									</el-button-group>
								</el-form-item>
							</el-form>

							<!-- 无数据时的友好提示 -->
							<div v-if="!state.stocktakingTableLoading && state.stocktakingTableData.length === 0"
								style="text-align: center; padding: 40px 0; color: #909399;">
								<el-icon :size="64" style="margin-bottom: 16px;"><ele-DocumentRemove /></el-icon>
								<div style="font-size: 16px; margin-bottom: 8px;">
									货品 <strong style="color: #409EFF;">{{ state.goodsData.goodsName }}</strong>
									还未有盘点记录数据
								</div>
								<div style="font-size: 14px;">
									如有需要，请前往出入库管理中的盘点单表管理进行盘点
									<el-button type="primary" size="small"
										@click="goToStocktakingOrder">点击跳转</el-button>
								</div>
							</div>

							<!-- 盘点记录表格 -->
							<el-table v-if="state.stocktakingTableData.length > 0 || state.stocktakingTableLoading"
								:data="state.stocktakingTableData" style="width: 100%"
								v-loading="state.stocktakingTableLoading" border
								:empty-text="`货品编码 ${state.goodsData.goodsCode} 还未有盘点记录数据`" size="small">
								<el-table-column type="index" label="序号" width="60" align="center" />
								<el-table-column prop="code" label="盘点单号" min-width="120" show-overflow-tooltip />
								<el-table-column prop="inventoryResult" label="盘点结果" min-width="100"
									show-overflow-tooltip />
								<el-table-column prop="warehouseNameDisplay" label="仓库名称" min-width="120"
									show-overflow-tooltip>
									<template #default="scope">
										{{ getWarehouseName(scope.row.warehouseId || scope.row.warehouseName) ||
											scope.row.warehouseNameDisplay || scope.row.warehouseName || '-' }}
									</template>
								</el-table-column>
								<el-table-column prop="stockTakingType" label="盘点类型" min-width="100"
									show-overflow-tooltip />
								<el-table-column prop="startTime" label="盘点开始时间" min-width="140"
									show-overflow-tooltip />
								<el-table-column prop="endTime" label="盘点结束时间" min-width="140" show-overflow-tooltip />
								<el-table-column prop="quantity" label="盘点数量" width="100" align="right"
									show-overflow-tooltip />
								<el-table-column prop="profitQuantity" label="盘盈数量" width="100" align="right"
									show-overflow-tooltip>
									<template #default="scope">
										<span :style="{ color: scope.row.profitQuantity ? '#67C23A' : '' }">
											{{ scope.row.profitQuantity || '' }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="lossQuantity" label="盘亏数量" width="100" align="right"
									show-overflow-tooltip>
									<template #default="scope">
										<span :style="{ color: scope.row.lossQuantity ? '#F56C6C' : '' }">
											{{ scope.row.lossQuantity ? '-' + scope.row.lossQuantity : '' }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="profitAmount" label="盘盈金额" width="100" align="right"
									show-overflow-tooltip>
									<template #default="scope">
										<span :style="{ color: scope.row.profitAmount ? '#67C23A' : '' }">
											{{ scope.row.profitAmount ? scope.row.profitAmount.toFixed(2) : '' }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="lossAmount" label="盘亏金额" width="100" align="right"
									show-overflow-tooltip>
									<template #default="scope">
										<span :style="{ color: scope.row.lossAmount ? '#F56C6C' : '' }">
											{{ scope.row.lossAmount ? '-' + scope.row.lossAmount.toFixed(2) : '' }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="documentStatus" label="单据状态" width="100" align="center">
									<template #default="scope">
										<g-sys-dict v-model="scope.row.documentStatus" code="DocumentStatusEnum" />
									</template>
								</el-table-column>
								<el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
								<el-table-column prop="createTime" label="创建时间" min-width="140" show-overflow-tooltip />
							</el-table>

							<!-- 分页 -->
							<div v-if="state.stocktakingTableData.length > 0"
								style="display: flex; justify-content: flex-end; margin-top: 10px;">
								<el-pagination v-model:currentPage="state.stocktakingTableParams.page"
									v-model:page-size="state.stocktakingTableParams.pageSize"
									:total="state.stocktakingTableParams.total" :page-sizes="[10, 20, 50, 100]"
									layout="total, sizes, prev, pager, next, jumper" size="small" background
									@current-change="handleStocktakingPageChange"
									@size-change="handleStocktakingSizeChange" />
							</div>
						</el-tab-pane>

						<!-- 调拨记录 -->
						<el-tab-pane label="调拨记录" name="transfer">
							<!-- 当前货品信息提示 -->
							<el-alert :title="`当前查询货品：${state.goodsData.goodsName}`" type="info" :closable="false"
								style="margin-bottom: 15px;">
							</el-alert>

							<!-- 查询表单 -->
							<el-form :model="state.transferQueryParams" inline style="margin-bottom: 15px;">
								<el-form-item label="调拨单号">
									<el-input v-model="state.transferQueryParams.code" placeholder="请输入调拨单号"
										clearable style="width: 200px;" />
								</el-form-item>
								<el-form-item label="调出仓库">
									<el-input v-model="state.transferQueryParams.fromWarehouse" placeholder="请输入调出仓库"
										clearable style="width: 200px;" />
								</el-form-item>
								<el-form-item label="调入仓库">
									<el-input v-model="state.transferQueryParams.toWarehouse" placeholder="请输入调入仓库"
										clearable style="width: 200px;" />
								</el-form-item>
								<el-form-item>
									<el-button-group>
										<el-button type="primary" @click="handleTransferQuery">
											<el-icon><ele-Search /></el-icon>查询
										</el-button>
										<el-button @click="handleTransferReset">
											<el-icon><ele-Refresh /></el-icon>重置
										</el-button>
									</el-button-group>
								</el-form-item>
							</el-form>

							<!-- 无数据提示 -->
							<div v-if="!state.transferTableLoading && state.transferTableData.length === 0"
								style="text-align: center; padding: 40px 0; color: #909399;">
								<el-icon :size="64" style="margin-bottom: 16px;"><ele-DocumentRemove /></el-icon>
								<div style="font-size: 16px; margin-bottom: 8px;">
									货品 <strong style="color: #409EFF;">{{ state.goodsData.goodsName }}</strong>
									还未有调拨记录数据
								</div>
								<div style="font-size: 14px;">
									如有需要，请前往出入库管理中的调拨单表管理进行调拨
									<el-button type="primary" size="small"
										@click="goToTransferOrder">点击跳转</el-button>
								</div>
							</div>

							<!-- 调拨记录表格 -->
							<el-table v-if="state.transferTableData.length > 0 || state.transferTableLoading"
								:data="state.transferTableData" style="width: 100%"
								v-loading="state.transferTableLoading" border
								:empty-text="`货品名称 ${state.goodsData.goodsName} 还未有调拨记录数据`" size="small">
								<el-table-column type="index" label="序号" width="60" align="center" />
								<el-table-column prop="code" label="调拨单号" min-width="120" show-overflow-tooltip />
								<el-table-column prop="fromWarehouse" label="调出仓库" min-width="120" show-overflow-tooltip>
									<template #default="scope">
										{{ getWarehouseName(scope.row.fromWarehouse) || scope.row.fromWarehouse || '-' }}
									</template>
								</el-table-column>
								<el-table-column prop="toWarehouse" label="调入仓库" min-width="120" show-overflow-tooltip>
									<template #default="scope">
										{{ getWarehouseName(scope.row.toWarehouse) || scope.row.toWarehouse || '-' }}
									</template>
								</el-table-column>
								<el-table-column prop="transferQuantity" label="调拨数量" width="100" align="right" show-overflow-tooltip />
								<el-table-column prop="transferAmount" label="调拨金额" width="100" align="right" show-overflow-tooltip>
									<template #default="scope">
										{{ scope.row.transferAmount ? `¥${scope.row.transferAmount}` : '-' }}
									</template>
								</el-table-column>
								<el-table-column prop="agentName" label="经办人" min-width="100" show-overflow-tooltip />
								<el-table-column prop="applyDate" label="申请日期" min-width="120" show-overflow-tooltip />
								<el-table-column prop="documentStatus" label="单据状态" width="100" align="center" show-overflow-tooltip>
									<template #default="scope">
										<el-tag v-if="scope.row.documentStatus === 1" type="success" size="small">已审核</el-tag>
										<el-tag v-else-if="scope.row.documentStatus === 0" type="warning" size="small">待审核</el-tag>
										<el-tag v-else type="info" size="small">{{ scope.row.documentStatus || '未知' }}</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="outStatus" label="出库状态" width="100" align="center" show-overflow-tooltip>
									<template #default="scope">
										<el-tag v-if="scope.row.outStatus === 1" type="success" size="small">已出库</el-tag>
										<el-tag v-else-if="scope.row.outStatus === 0" type="warning" size="small">待出库</el-tag>
										<el-tag v-else type="info" size="small">{{ scope.row.outStatus || '未知' }}</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="inStatus" label="入库状态" width="100" align="center" show-overflow-tooltip>
									<template #default="scope">
										<el-tag v-if="scope.row.inStatus === 1" type="success" size="small">已入库</el-tag>
										<el-tag v-else-if="scope.row.inStatus === 0" type="warning" size="small">待入库</el-tag>
										<el-tag v-else type="info" size="small">{{ scope.row.inStatus || '未知' }}</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
								<el-table-column prop="createTime" label="创建时间" min-width="140" show-overflow-tooltip />
							</el-table>

							<!-- 分页 -->
							<div v-if="state.transferTableData.length > 0"
								style="display: flex; justify-content: flex-end; margin-top: 10px;">
								<el-pagination v-model:currentPage="state.transferTableParams.page"
									v-model:page-size="state.transferTableParams.pageSize"
									:total="state.transferTableParams.total" :page-sizes="[10, 20, 50, 100]"
									layout="total, sizes, prev, pager, next, jumper" size="small" background
									@current-change="handleTransferPageChange"
									@size-change="handleTransferSizeChange" />
							</div>
						</el-tab-pane>

						<!-- 进货记录 -->
						<el-tab-pane label="进货记录" name="purchase">
							<!-- 当前货品信息提示 -->
							<el-alert :title="`当前查询货品：${state.goodsData.goodsName}`" type="info" :closable="false"
								style="margin-bottom: 15px;">
							</el-alert>

							<!-- 查询条件 -->
							<el-form :model="state.purchaseQueryParams" inline style="margin-bottom: 10px;">
								<el-form-item label="进货单号">
									<el-input v-model="state.purchaseQueryParams.code" placeholder="请输入进货单号" clearable
										style="width: 200px;" />
								</el-form-item>
								<el-form-item label="供应商">
									<el-input v-model="state.purchaseQueryParams.supplier" placeholder="请输入供应商"
										clearable style="width: 150px;" />
								</el-form-item>
								<el-form-item label="单据状态">
									<el-input v-model="state.purchaseQueryParams.documentStatus" placeholder="请输入单据状态"
										clearable style="width: 150px;" />
								</el-form-item>
								<el-form-item label="">
									<el-button-group>
										<el-button type="primary" icon="ele-Search"
											@click="handlePurchaseQuery">查询</el-button>
										<el-button icon="ele-Refresh" style="margin-left: 10px;"
											@click="handlePurchaseReset">重置</el-button>
									</el-button-group>
								</el-form-item>
							</el-form>

							<!-- 无数据时的友好提示 -->
							<div v-if="!state.purchaseTableLoading && state.purchaseTableData.length === 0"
								style="text-align: center; padding: 40px 0; color: #909399;">
								<el-icon :size="64" style="margin-bottom: 16px;"><ele-DocumentRemove /></el-icon>
								<div style="font-size: 16px; margin-bottom: 8px;">
									货品 <strong style="color: #409EFF;">{{ state.goodsData.goodsName }}</strong>
									还未有进货记录数据
								</div>
								<div style="font-size: 14px;">
									如有需要，请前往订单管理中的进货订单管理进行操作
									<el-button type="primary" size="small" @click="goToPurchaseOrder">点击跳转</el-button>
								</div>
							</div>

							<!-- 进货记录表格 -->
							<el-table v-if="state.purchaseTableData.length > 0 || state.purchaseTableLoading"
								:data="state.purchaseTableData" style="width: 100%"
								v-loading="state.purchaseTableLoading" border
								:empty-text="`货品 ${state.goodsData.goodsName} 还未有进货记录数据`" size="small">
								<el-table-column type="index" label="序号" width="60" align="center" />
								<el-table-column prop="code" label="进货单号" min-width="120" show-overflow-tooltip />
								<el-table-column prop="purchaseDate" label="进货日期" min-width="120"
									show-overflow-tooltip />
								<el-table-column prop="supplier" label="供应商" min-width="120" show-overflow-tooltip />
								<el-table-column prop="contactPerson" label="联系人" min-width="100"
									show-overflow-tooltip />
								<el-table-column prop="contactMethod" label="联系方式" min-width="120"
									show-overflow-tooltip />
								<el-table-column prop="itemQuantity" label="货品数量" width="100" align="right"
									show-overflow-tooltip />
								<el-table-column prop="itemAmount" label="货品金额" width="120" align="right"
									show-overflow-tooltip>
									<template #default="scope">
										<span style="color: #f56c6c; font-weight: bold;">
											{{ scope.row.itemAmount ? scope.row.itemAmount.toFixed(2) : '0.00' }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="documentStatus" label="单据状态" width="100" align="center">
									<template #default="scope">
										<g-sys-dict v-model="scope.row.documentStatus" code="DocumentStatusEnum" />
									</template>
								</el-table-column>
								<el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
								<el-table-column prop="createUserName" label="创建人" min-width="100"
									show-overflow-tooltip />
								<el-table-column prop="createTime" label="创建时间" min-width="140" show-overflow-tooltip />
							</el-table>

							<!-- 分页 -->
							<div v-if="state.purchaseTableData.length > 0"
								style="display: flex; justify-content: flex-end; margin-top: 10px;">
								<el-pagination v-model:currentPage="state.purchaseTableParams.page"
									v-model:page-size="state.purchaseTableParams.pageSize"
									:total="state.purchaseTableParams.total" :page-sizes="[10, 20, 50, 100]"
									layout="total, sizes, prev, pager, next, jumper" size="small" background
									@current-change="handlePurchasePageChange"
									@size-change="handlePurchaseSizeChange" />
							</div>
						</el-tab-pane>

						<!-- 销售记录 -->
						<el-tab-pane label="销售记录" name="sales">
							<!-- 当前货品信息提示 -->
							<el-alert :title="`当前查询货品：${state.goodsData.goodsName}`" type="info" :closable="false"
								style="margin-bottom: 15px;">
							</el-alert>

							<!-- 查询条件 -->
							<el-form :model="state.salesQueryParams" inline style="margin-bottom: 10px;">
								<el-form-item label="销售单号">
									<el-input v-model="state.salesQueryParams.code" placeholder="请输入销售单号" clearable
										style="width: 200px;" />
								</el-form-item>
								<el-form-item label="客户名称">
									<el-input v-model="state.salesQueryParams.customerName" placeholder="请输入客户名称"
										clearable style="width: 150px;" />
								</el-form-item>
								<el-form-item label="单据状态">
									<el-input v-model="state.salesQueryParams.documentStatus" placeholder="请输入单据状态"
										clearable style="width: 150px;" />
								</el-form-item>
								<el-form-item label="">
									<el-button-group>
										<el-button type="primary" icon="ele-Search"
											@click="handleSalesQuery">查询</el-button>
										<el-button icon="ele-Refresh" style="margin-left: 10px;"
											@click="handleSalesReset">重置</el-button>
									</el-button-group>
								</el-form-item>
							</el-form>

							<!-- 无数据时的友好提示 -->
							<div v-if="!state.salesTableLoading && state.salesTableData.length === 0"
								style="text-align: center; padding: 40px 0; color: #909399;">
								<el-icon :size="64" style="margin-bottom: 16px;"><ele-DocumentRemove /></el-icon>
								<div style="font-size: 16px; margin-bottom: 8px;">
									货品 <strong style="color: #409EFF;">{{ state.goodsData.goodsName }}</strong>
									还未有销售记录数据
								</div>
								<div style="font-size: 14px;">
									如有需要，请前往订单管理中的销售订单管理进行操作
									<el-button type="primary" size="small" @click="goToSalesOrder">点击跳转</el-button>
								</div>
							</div>

							<!-- 销售记录表格 -->
							<el-table v-if="state.salesTableData.length > 0 || state.salesTableLoading"
								:data="state.salesTableData" style="width: 100%" v-loading="state.salesTableLoading"
								border :empty-text="`货品 ${state.goodsData.goodsName} 还未有销售记录数据`" size="small">
								<el-table-column type="index" label="序号" width="60" align="center" />
								<el-table-column prop="code" label="销售单号" min-width="120" show-overflow-tooltip />
								<el-table-column prop="salesDate" label="销售日期" min-width="120" show-overflow-tooltip />
								<el-table-column prop="customerName" label="客户名称" min-width="120"
									show-overflow-tooltip />
								<el-table-column prop="contactPerson" label="联系人" min-width="100"
									show-overflow-tooltip />
								<el-table-column prop="contactMethod" label="联系方式" min-width="120"
									show-overflow-tooltip />
								<el-table-column prop="salesQuantity" label="销售数量" width="100" align="right"
									show-overflow-tooltip />
								<el-table-column prop="salesAmount" label="销售金额" width="120" align="right"
									show-overflow-tooltip>
									<template #default="scope">
										<span style="color: #67C23A; font-weight: bold;">
											{{ scope.row.salesAmount ? scope.row.salesAmount.toFixed(2) : '0.00' }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="documentStatus" label="单据状态" width="100" align="center">
									<template #default="scope">
										<g-sys-dict v-model="scope.row.documentStatus" code="DocumentStatusEnum" />
									</template>
								</el-table-column>
								<el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
								<el-table-column prop="createUserName" label="创建人" min-width="100"
									show-overflow-tooltip />
								<el-table-column prop="createTime" label="创建时间" min-width="140" show-overflow-tooltip />
							</el-table>

							<!-- 分页 -->
							<div v-if="state.salesTableData.length > 0"
								style="display: flex; justify-content: flex-end; margin-top: 10px;">
								<el-pagination v-model:currentPage="state.salesTableParams.page"
									v-model:page-size="state.salesTableParams.pageSize"
									:total="state.salesTableParams.total" :page-sizes="[10, 20, 50, 100]"
									layout="total, sizes, prev, pager, next, jumper" size="small" background
									@current-change="handleSalesPageChange" @size-change="handleSalesSizeChange" />
							</div>
						</el-tab-pane>

						<!-- 出入库统计 -->
						<el-tab-pane label="出入库统计" name="inoutstats">
							<!-- 当前货品信息提示 -->
							<el-alert :title="`当前查询货品：${state.goodsData.goodsName}`" type="info" :closable="false"
								style="margin-bottom: 15px;">
							</el-alert>

							<!-- 统计卡片区域 -->
							<el-row :gutter="20" style="margin-bottom: 20px;">
								<!-- 入库统计 -->
								<el-col :span="6">
									<el-card class="stats-card" shadow="hover" style="background: linear-gradient(135deg, #67C23A, #85CE61);">
										<div class="stats-content">
											<div class="stats-value" style="color: white;">{{ state.inoutStatsData.totalInQuantity }}</div>
											<div class="stats-label" style="color: white;">入库数量总和</div>
										</div>
									</el-card>
								</el-col>
								<el-col :span="6">
									<el-card class="stats-card" shadow="hover" style="background: linear-gradient(135deg, #67C23A, #85CE61);">
										<div class="stats-content">
											<div class="stats-value" style="color: white;">¥{{ state.inoutStatsData.totalInAmount.toFixed(2) }}</div>
											<div class="stats-label" style="color: white;">入库金额总和</div>
										</div>
									</el-card>
								</el-col>
								<!-- 出库统计 -->
								<el-col :span="6">
									<el-card class="stats-card" shadow="hover" style="background: linear-gradient(135deg, #F56C6C, #F78989);">
										<div class="stats-content">
											<div class="stats-value" style="color: white;">{{ state.inoutStatsData.totalOutQuantity }}</div>
											<div class="stats-label" style="color: white;">出库数量总和</div>
										</div>
									</el-card>
								</el-col>
								<el-col :span="6">
									<el-card class="stats-card" shadow="hover" style="background: linear-gradient(135deg, #F56C6C, #F78989);">
										<div class="stats-content">
											<div class="stats-value" style="color: white;">¥{{ state.inoutStatsData.totalOutAmount.toFixed(2) }}</div>
											<div class="stats-label" style="color: white;">出库金额总和</div>
										</div>
									</el-card>
								</el-col>
							</el-row>

							<!-- 库存差额统计 -->
							<el-row :gutter="20" style="margin-bottom: 20px;">
								<el-col :span="12">
									<el-card class="stats-card" shadow="hover" style="background: linear-gradient(135deg, #409EFF, #66B1FF);">
										<div class="stats-content">
											<div class="stats-value" style="color: white;">{{ state.inoutStatsData.totalInQuantity - state.inoutStatsData.totalOutQuantity }}</div>
											<div class="stats-label" style="color: white;">库存数量差额 (入库-出库)</div>
										</div>
									</el-card>
								</el-col>
								<el-col :span="12">
									<el-card class="stats-card" shadow="hover" style="background: linear-gradient(135deg, #409EFF, #66B1FF);">
										<div class="stats-content">
											<div class="stats-value" style="color: white;">¥{{ (state.inoutStatsData.totalInAmount - state.inoutStatsData.totalOutAmount).toFixed(2) }}</div>
											<div class="stats-label" style="color: white;">库存金额差额 (入库-出库)</div>
										</div>
									</el-card>
								</el-col>
							</el-row>

							<!-- 无数据时的友好提示 -->
							<div v-if="!state.inoutStatsLoading && state.inoutStatsData.allInoutData.length === 0"
								style="text-align: center; padding: 40px 0; color: #909399;">
								<el-icon :size="64" style="margin-bottom: 16px;"><ele-DocumentRemove /></el-icon>
								<div style="font-size: 16px; margin-bottom: 8px;">
									货品 <strong style="color: #409EFF;">{{ state.goodsData.goodsName }}</strong>
									还未有出入库记录数据
								</div>
								<div style="font-size: 14px;">
									请先进行入库或出库操作后再查看统计数据
								</div>
							</div>

							<!-- 出入库明细表格 -->
							<el-table v-if="state.inoutStatsData.allInoutData.length > 0 || state.inoutStatsLoading"
								:data="getPaginatedInoutData()" style="width: 100%"
								v-loading="state.inoutStatsLoading" border
								:empty-text="`货品 ${state.goodsData.goodsName} 还未有出入库记录数据`" size="small">
								<el-table-column type="index" label="序号" width="60" align="center" />
								<el-table-column prop="typeName" label="类型" width="80" align="center">
									<template #default="scope">
										<el-tag v-if="scope.row.type === 'instock'" type="success" size="small">{{ scope.row.typeName }}</el-tag>
										<el-tag v-else type="danger" size="small">{{ scope.row.typeName }}</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="code" label="单号" min-width="120" show-overflow-tooltip />
								<el-table-column prop="date" label="日期" min-width="120" show-overflow-tooltip />
								<el-table-column prop="warehouseName" label="仓库名称" min-width="120" show-overflow-tooltip>
									<template #default="scope">
										{{ getWarehouseName(scope.row.warehouseName) || scope.row.warehouseName || '-' }}
									</template>
								</el-table-column>
								<el-table-column prop="relatedCode" label="关联单号" min-width="120" show-overflow-tooltip />
								<el-table-column prop="agentName" label="经办人/客户" min-width="120" show-overflow-tooltip />
								<el-table-column prop="quantity" label="数量" width="100" align="right" show-overflow-tooltip>
									<template #default="scope">
										<span :style="{ color: scope.row.type === 'instock' ? '#67C23A' : '#F56C6C', fontWeight: 'bold' }">
											{{ scope.row.type === 'instock' ? '+' : '-' }}{{ scope.row.quantity || 0 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="amount" label="金额" width="120" align="right" show-overflow-tooltip>
									<template #default="scope">
										<span :style="{ color: scope.row.type === 'instock' ? '#67C23A' : '#F56C6C', fontWeight: 'bold' }">
											{{ scope.row.type === 'instock' ? '+' : '-' }}¥{{ scope.row.amount ? scope.row.amount.toFixed(2) : '0.00' }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="documentStatus" label="单据状态" width="100" align="center">
									<template #default="scope">
										<g-sys-dict v-model="scope.row.documentStatus" code="DocumentStatusEnum" />
									</template>
								</el-table-column>
								<el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
								<el-table-column prop="createUserName" label="创建人" min-width="100" show-overflow-tooltip />
								<el-table-column prop="createTime" label="创建时间" min-width="140" show-overflow-tooltip />
							</el-table>

							<!-- 分页 -->
							<div v-if="state.inoutStatsData.allInoutData.length > 0"
								style="display: flex; justify-content: flex-end; margin-top: 10px;">
								<el-pagination v-model:currentPage="state.inoutStatsTableParams.page"
									v-model:page-size="state.inoutStatsTableParams.pageSize"
									:total="state.inoutStatsTableParams.total" :page-sizes="[10, 20, 50, 100]"
									layout="total, sizes, prev, pager, next, jumper" size="small" background
									@current-change="handleInoutStatsPageChange"
									@size-change="handleInoutStatsSizeChange" />
							</div>
						</el-tab-pane>

						<!-- 操作记录 -->
						<el-tab-pane label="操作记录" name="operation">
							<!-- 查询条件 -->
							<el-form :model="state.operationLogQueryParams" inline style="margin-bottom: 10px;">
								<el-form-item label="操作账号">
									<el-input v-model="state.operationLogQueryParams.account" placeholder="请输入操作账号"
										clearable style="width: 200px;" />
								</el-form-item>
								<el-form-item label="操作方法">
									<el-input v-model="state.operationLogQueryParams.actionName" placeholder="请输入操作方法"
										clearable style="width: 200px;" />
								</el-form-item>
								<el-form-item label="IP地址">
									<el-input v-model="state.operationLogQueryParams.remoteIp" placeholder="请输入IP地址"
										clearable style="width: 150px;" />
								</el-form-item>
								<el-form-item label="">
									<el-button-group>
										<el-button type="primary" icon="ele-Search"
											@click="handleOperationLogQuery">查询</el-button>
										<el-button icon="ele-Refresh" style="margin-left: 10px;"
											@click="handleOperationLogReset">重置</el-button>
									</el-button-group>
								</el-form-item>
							</el-form>

							<!-- 操作记录表格 -->
							<el-table :data="state.operationLogTableData" style="width: 100%"
								v-loading="state.operationLogTableLoading" border empty-text="暂无数据" size="small">
								<el-table-column type="index" label="序号" width="60" align="center" />
								<el-table-column prop="displayTitle" label="操作名称" min-width="120"
									show-overflow-tooltip />
								<el-table-column prop="actionName" label="操作方法" min-width="100" show-overflow-tooltip />
								<el-table-column prop="account" label="操作账号" min-width="100" show-overflow-tooltip />
								<el-table-column prop="realName" label="操作人员" min-width="100" show-overflow-tooltip />
								<el-table-column prop="remoteIp" label="IP地址" min-width="120" show-overflow-tooltip />
								<el-table-column prop="location" label="操作地点" min-width="120" show-overflow-tooltip />
								<el-table-column prop="browser" label="浏览器" min-width="120" show-overflow-tooltip />
								<el-table-column prop="os" label="操作系统" min-width="100" show-overflow-tooltip />
								<el-table-column prop="elapsed" label="耗时(ms)" width="80" align="right"
									show-overflow-tooltip />
								<el-table-column prop="status" label="执行状态" width="80" align="center">
									<template #default="scope">
										<el-tag v-if="scope.row.status === 'Succeeded'" type="success"
											size="small">成功</el-tag>
										<el-tag v-else-if="scope.row.status === 'Failed'" type="danger"
											size="small">失败</el-tag>
										<el-tag v-else type="info" size="small">{{ scope.row.status || '未知' }}</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="createTime" label="操作时间" min-width="140" show-overflow-tooltip />
							</el-table>

							<!-- 分页 -->
							<div style="display: flex; justify-content: flex-end; margin-top: 10px;">
								<el-pagination v-model:currentPage="state.operationLogTableParams.page"
									v-model:page-size="state.operationLogTableParams.pageSize"
									:total="state.operationLogTableParams.total" :page-sizes="[10, 20, 50, 100]"
									layout="total, sizes, prev, pager, next, jumper" size="small" background
									@current-change="handleOperationLogPageChange"
									@size-change="handleOperationLogSizeChange" />
							</div>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</div>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog">关 闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<style lang="scss" scoped>
.goodsModel-detail-container {

	// 固定对话框高度
	:deep(.goods-detail-dialog) {
		.el-dialog__body {
			height: 90vh;
			max-height: 900px;
			padding: 0;
		}
	}

	.dialog-content {
		height: 100%;
		overflow-y: auto;
		padding: 20px;

		// 美化滚动条
		&::-webkit-scrollbar {
			width: 8px;
		}

		&::-webkit-scrollbar-track {
			background: #f1f1f1;
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background: #888;
			border-radius: 4px;

			&:hover {
				background: #555;
			}
		}
	}

	.info-card {
		margin-bottom: 10px;

		.card-header {
			font-weight: bold;
			font-size: 16px;
		}
	}

	// 卡片头部样式
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.card-title {
			font-weight: 600;
			font-size: 16px;
			color: #303133;
		}
	}

	// 仓库信息卡片样式
	.warehouse-info-card {
		:deep(.el-card__header) {
			background-color: #f8f9fa;
			border-bottom: 1px solid #e4e7ed;
		}
	}

	// 库位信息卡片样式
	.warehouse-places-card {
		:deep(.el-card__header) {
			background-color: #f0f9ff;
			border-bottom: 1px solid #e4e7ed;
		}
		
		:deep(.el-table) {
			.el-table__header {
				background-color: #fafafa;
			}
		}
	}

	.goods-image-container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	// 系统信息区域样式
	.system-info {
		margin-top: 20px;
		padding: 15px;
		background-color: #f8f9fa;
		border: 1px solid #e9ecef;
		border-radius: 4px;

		.info-label {
			color: #606266;
			margin-right: 10px;
			font-weight: normal;
		}

		.info-value {
			color: #303133;
		}

		.el-col {
			margin-bottom: 0;
		}
	}

	:deep(.detail-label) {
		font-weight: bold;
		background-color: #fafafa;
		width: 150px;
	}

	.detail-value {
		color: #606266;

		&.price {
			color: #f56c6c;
			font-weight: bold;
			font-size: 16px;
		}
	}

	:deep(.el-descriptions__body) {
		background-color: #fff;
	}

	// 统计卡片样式
	.stats-card {
		border-radius: 8px;
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
		}

		.stats-content {
			text-align: center;
			padding: 10px 0;

			.stats-value {
				font-size: 24px;
				font-weight: bold;
				color: #409EFF;
				margin-bottom: 5px;
			}

			.stats-label {
				font-size: 14px;
				color: #606266;
			}
		}
	}
}
</style>
